<template>
  <ul oncontextmenu="window.event.returnValue=false">
    <li
      v-for="(item,index) in Menu"
      @mouseover="mouseoverLi(item)"
      :key="index"
      @click.stop="handleMethod(item.method,item.param,item.status)"
    >
      <span>{{item.name}}</span>
      <i
        class="el-icon-arrow-right pull-right"
        :class="{'trans-left':item.show}"
        v-if="item.children && item.children.length>0"
      ></i>
      <i
        class="el-icon-check pull-right"       
        v-if="item.checked"
      ></i>
      <customMenuItem
        :menuData="item.children"
        v-show="item.show"
        v-if="item.children"
        @list="handleMethod"
      ></customMenuItem>
    </li>
  </ul>
</template>
<script>
import { clone } from "@/plugin/tool.js";
export default {
  name: "customMenuItem",
  data() {
    return {
      Menu: [],
      lastItem: {},
    };
  },
  props: {
    menuData: {
      type: Array,
    },
    ulShow: {
      type: Boolean,
    },
  },
  watch: {
    menuData: {
      deep: true,
      immediate: true,
      handler: function (item) {
        let Menu = clone(item);
        Menu.map(($item) => {
          $item.show = false;
        });
        this.Menu = Menu;
      },
    },
  },
  methods: {
    handleMethod(method, param, status) {
      if (status == 2) return false;
      this.$emit("list", method, param);
    },
    mouseoverLi(item) {
      if (this.lastItem.show) {
        this.lastItem.show = false;
      }
      if (item.children) {
        item.show = true;
        this.lastItem = item;
      }
    },
  },
};
</script>
